<!-- sidebar: blog index -->
<script>
    window.gs_status.current_blog_uri = null;
    window.gs_status.current_blog_version = 0;

    function gs_current_pathname() {
        let p = location.pathname;
        if (p.endsWith('/')) {
            p = p + 'index.html';
        }
        return p;
    }

    function gs_set_loading() {
        document.getElementById('gsi-content').innerHTML = `<div class="block w-5 h-5">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg></div>`;
        window.scrollTo({ top: 0 });
    }

    function gs_set_current_blog_uri(uri) {
        const old_uri = window.gs_status.current_blog_uri;
        console.log(`set chapter: ${old_uri} => ${uri}`);
        if (old_uri) {
            // dynamic load part of page:
            document.querySelector(`#gsi-index a[href="{{ site.rootPath }}${old_uri}"]`).classList.remove('gsc-active');
        }
        const a = document.querySelector(`#gsi-index a[href="{{ site.rootPath }}${uri}"]`);
        a.classList.add('gsc-active');
        // set new current uri:
        window.gs_status.current_blog_uri = uri;
        // scroll into view if first loaded:
        if (!old_uri) {
            a.parentNode.scrollIntoView && a.parentNode.scrollIntoView(true);
        }
    }

    function gs_load_blog(uri, shouldPushState) {
        if (uri === window.gs_status.current_blog_uri) {
            return;
        }
        gs_set_current_blog_uri(uri);
        if (shouldPushState) {
            console.log(`push state: ${uri}`);
            history.pushState({}, '', `{{ site.rootPath }}${uri}`);
        }
        console.log(`try load new chapter: ${uri}`);
        if (window.gs_status.show_offcanvas) {
            gitsite.hideOffcanvas();
        }
        gs_set_loading();
        window.gs_status.current_blog_version++;
        const version = window.gs_status.current_blog_version;
        gs_load_blog_content(uri).then((html) => {
            if (version === window.gs_status.current_blog_version) {
                console.log(`loaded ok: ${uri}`);
                gitsite.setInnerHTML(document.querySelector('#gsi-content'), html);
                document.title = document.querySelector('#gsi-blog-title h1').innerHTML + ' - ' + window.gs_status.title_suffix;
                gitsite.triggerContentChangedListener();
            }
        }).catch(err => {
            console.error(err);
        });
    }

    async function gs_load_blog_content(uri) {
        // load /blogs/<uri>/content.html:
        let chapter_uri = uri.substring(0, uri.length - 'index.html'.length) + 'content.html';
        let resp = await fetch(`{{ site.rootPath }}${chapter_uri}`);
        if (resp.status === 200) {
            return await resp.text();
        }
    }
</script>

<div id="gsi-index">
    {% for blog in blogs %}
    <div class="gsc-index-item">
        <div class="pt-4">
            <span class="pl-1 text-sm font-semibold uppercase">
                <time datetime="{{ blog.date }}"></time>
            </span>
        </div>
        <a href="{{ site.rootPath }}/blogs/{{ blog.uri }}/index.html"
            onclick="gs_load_blog('/blogs/{{ blog.uri }}/index.html',true);return false;">
            <span class="gsc-index-item-title">{{ blog.title }}</span>
        </a>
        <div class="pb-4"></div>
    </div>
    {% endfor %}
</div>
<script>
    Array.from(document.querySelectorAll('#gsi-index time')).forEach(dom => {
        dom.innerHTML = new Date(dom.getAttribute('datetime')).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
    });

    gs_set_current_blog_uri(gs_current_pathname().substring('{{ site.rootPath }}'.length));
    window.onpopstate = function (e) {
        console.log(`pop state: ${gs_current_pathname()}`);
        gs_load_blog(gs_current_pathname().substring('{{ site.rootPath }}'.length));
    }
</script>
<!--// sidebar: blog index -->